<template>
  <div>
    <h3>评论列表</h3>
    <hr>
    <textarea placeholder="最多输入200字" maxlength="200"  v-model.trim="textValue"></textarea>
    <mt-button type="primary" size="large" @click="textcontent" >发表评论</mt-button>

    <div class="subcontent">     
        <div class="content-box" v-for="(item,index) in subcomment" :key="index">
            <div class="box-title">
               第{{index+1}}楼:{{item.user_name}} &nbsp;&nbsp; 评论时间:{{item.add_time | timeFilter}}
            </div>
            <div class="box-body">
                 {{item.content==='undefined' ? '该用户未输入内容！':item.content}}
            </div>
        </div>
    </div>

    <mt-button type="danger" size="large" plain @click="submore">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      pageIndex:1,
      subcomment:[],
      textValue:null,
    };
  },
  props:['id'],
  created(){
      this.getsubList()
  },
  methods:{
      getsubList(){
          this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then((res)=>{
            //   console.log(res.body);
              if(res.body.status === 0){
                  this.subcomment =  this.subcomment.concat(res.body.message)
              }else{
                  Toast('获取评论失败')
              }
          })
      },
      submore(){
          this.pageIndex++,
          this.getsubList()
      },
    //   评论添加功能
    textcontent(){                          
        this.$http.post('api/postcomment/'+this.$route.params.id,{comtent:this.textValue})
        .then((res)=>{
            this.subcomment.unshift({
                content:this.textValue,
                user_name:'匿名用户',
                add_time:new Date()
            }),
            this.textValue = ''
        })
    }

  }
}
</script>
<style lang="scss" scoped>
  textarea{
      margin: 0;
  }
  .subcontent{
      margin:5px 0;
      padding: 0;
      .content-box{
          font-size: 13px;
          .box-title{
              background-color: #ccc;
              line-height: 25px;
          }
          .box-body{
              padding-left: 10px;
              line-height: 25px;
          }
      }
  }
</style>